<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <form>
    <div>
      <label for="">姓名</label>
      <input name="username" type="text" placeholder="姓名">
    </div>
    <div>
      <label for="">性别</label>
      <input name="gender" type="radio" value="男"> 男
      <input name="gender" type="radio" value="女"> 女
    </div>
    <input type="file" name="file_data">
    <button type="button">提交</button>

  </form>
  <script src="./lib/jquery.js"></script>
  <script>
    /*

    
    序列化
    快速把表单的值 构造成 适合在网络上传输数据格式 
    传输数据格式  
      1 ajax 参数传递 数据格式    a=1&b=2&c=3   jq内部封装   input标签 必须提供name属性 
      2 ajax 参数传递 文件上传    formdata   原生就支持 
     */


    const btn = document.querySelector("button");
    btn.onclick = function (e) {
      // 构造成  a=1&b=2&c=3
      // 获取dom元素 获取里面的值
      // 自己去拼接字符串。。。。

      // jq的序列化方法 a=1&b=2&c=3
      // username=姓名&gender=性别
      // const paramsStr = $("form").serialize();
      // console.log(paramsStr);

      // 传递文件的同时 也传递普通的文本

      // const fd = new FormData(接收form的dom元素);

      // 大事件项目的时候 会再一次提到知识点！！！ 
      const form = document.querySelector("form");
      const fd = new FormData(form);
      fd.forEach((val, key) => console.log(key, val));

      $.ajax({
        // fd 包含着普通的文字数据 和 文件数据 
        data: fd
      })





    }


  </script>
</body>

</html>